<template>
  <div class="nation">
    <!-- <header-bar
      v-if="!$route.meta.hideHeader"
      ref="header"
      :title="title"
    >
      <template v-if="$store.state.user.show" />
    </header-bar> -->

    <van-index-bar>
      <div>
        <van-index-anchor index="默认" />
        <van-cell title="中国" @click.native="checkDefaultNation('中国')" />

      </div>
      <div v-for="(item,index) in nation" :key="index">
        <van-index-anchor :index="item.keyWords" />
        <van-cell v-for="(ite,i) in item.list" :key="i" :title="ite.value" @click.native="checkNation(ite.value)" />

      </div>
    </van-index-bar>
  </div>
</template>

<script>
import Vue from 'vue'
import { IndexBar, IndexAnchor } from 'vant'

Vue.use(IndexBar)
Vue.use(IndexAnchor)
import { Cell, CellGroup } from 'vant'

Vue.use(Cell)
Vue.use(CellGroup)
import { geolocation } from '@/utils/nation'
export default {
  name: 'Nation',
  data() {
    return {
      nation: geolocation
    }
  },
  beforeCreate() {
    this.$dd.showTitleBar()
    this.$dd.setTitle({
      title: this.$route.meta.title
    }).then(res => {
      console.log(res)
    }).catch(err => { console.log(err) })
  },
  mounted() {
    this.$dd.showTitleBar()
    this.$dd.ready(() => {
      this.$dd.setTitle({
        title: this.$route.meta.title
      })
    })
  },
  methods: {
    checkDefaultNation(val) {
      this.$store.dispatch('user/setNation', val)
      this.$router.go(-1)
    },
    checkNation(val) {
      this.$store.dispatch('user/setNation', val)
      this.$router.go(-1)
    }
  },
  beforeRouteLeave(to, from, next) {
    if (to.path === '/code/index') {
      if (this.show) { // 钉钉头部返回页面缓存
        this.$store.dispatch('user/refresh', false)
      }
    }

    next()
  }

}
</script>

<style lang="scss" scoped>
.nation{
    width:100%;
        height:100%;
        overflow-y: scroll;
        background-color:#f7f8fa;
        font-family: PingFangSC-Regular, PingFang SC;
        margin-top:20px;
}
::v-deep .van-index-bar__index{
  font-size: 28px;
  padding-bottom:10px;
  padding-top:10px;
  padding-right:20px;
}
</style>
